<template>
  <el-dialog model-value="dialogVisible" :title="dialogTitle" width="30%" @close="handleClose" class="el-dialog">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="党员" prop="userId">
        <el-select v-model="form.userId" class="widthForm" placeholder="请选择党员" size="size">
          <el-option v-for="item in selectUserList" :key="item.id" :label="item.nickname" :value="item.id" />
        </el-select>
      </el-form-item>


      <el-form-item label="二级党委" prop="commiteId">
        <el-select v-model="form.commiteId" class="widthForm" placeholder="请选择党支部" size="size">
          <el-option v-for="item in SelectCommiteList" :key="item.id" :label="item.commiteName" :value="item.id" />
        </el-select>
      </el-form-item>

      <el-form-item label="党支部" prop="branchId">
        <el-select v-model="form.branchId" class="widthForm" placeholder="请选择党支部" size="size">
          <el-option v-for="item in SelectBranchList" :key="item.id" :label="item.branchName" :value="item.id" />
        </el-select>
      </el-form-item>


      <el-form-item label="邮箱" prop="email" :size="size">
        <el-input v-model="form.email" class="widthForm" :size="size" />
      </el-form-item>

      <el-form-item label="入党时间" prop="joinDate" class="widthForm">
        <el-date-picker v-model="form.joinDate" type="datetime" placeholder="请选择" :disabled-date="disabledDate"
          value-format="YYYY-MM-DD HH:mm:ss" fomat="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts" :size="size" />
      </el-form-item>

      <el-form-item label="性别" prop="sex" :size="size">
        <el-input v-model="form.sex" :size="size" class="widthForm" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" v-if="hasAuth('cms:party:add')" @click="handleConfirm">确认</el-button>
        <el-button @click="handleClose">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineEmits, defineProps, ref, watch } from "vue";
import requestUtil, { getServerUrl } from "@/utils/request";
import { ElMessage } from "element-plus";

const tableData = ref([]);

const props = defineProps({
  id: {
    type: Number,
    default: -1,
    required: true,
  },
  dialogTitle: {
    type: String,
    default: "",
    required: true,
  },
  dialogVisible: {
    type: Boolean,
    default: false,
    required: true,
  },
});

// 日期
const size = ref < 'default' | 'large' | 'small' > ('default')
const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]

const disabledDate = (time) => {
  return time.getTime() > Date.now()
}

const form = ref({
  id: -1,
  nickname: "",
  email: "",
  branchId: -1,
  branchName: "",
  commiteId: -1,
  commiteName: "",
  userId: -1,
  sex: "",
  joinDate: "",
});



const rules = ref({
  userId: [
    { required: true, message: "请选择党员", trigger: "blur" },
  ],
  joinDate: [
    { required: true, message: "请选择入党时间", trigger: "blur" },
  ],

  sex: [
    { required: true, message: "请输入", trigger: "blur" },
    { required: true, trigger: "blur", max: 1 },
  ],
  branchId: [
    { required: true, message: "请选择", trigger: "blur" },
  ],
  email: [
    { required: true, message: "邮箱地址不能为空", trigger: "blur" },
  ],
  commiteId: [
    { required: true, message: "二级党委不能为空", trigger: "blur" },
  ],
});

const formRef = ref(null);

const initFormData = async (id) => {
  let data = { id };
  const res = await requestUtil.get("party/getPartyById/", data);
  form.value = res.data.party;
};

// 党支部下拉框
const SelectBranchList = ref([]);
const SelectBranchListFun = async () => {
  const res = await requestUtil.get("branch/getBranchSelectList");
  SelectBranchList.value = res.data.branchList;
};

// 二级党委下拉框
const SelectCommiteList = ref([]);
const SelectCommiteListFun = async () => {
  const res = await requestUtil.get("commite/getSelectCommiteList");
  SelectCommiteList.value = res.data.commiteList;
};

// 用户信息下拉框
const selectUserList = ref([]);
const SelectUserListFun = async () => {
  let data = {
    pageNum: 1,
    pageSize: 100,
  };
  const res = await requestUtil.post("sys/user/list", data);
  selectUserList.value = res.data.userList.records;
};

watch(
  () => props.dialogVisible,
  () => {
    let id = props.id;
    if (id != -1) {
      initFormData(id);
      SelectBranchListFun();
      SelectCommiteListFun();
      SelectUserListFun();
    } else {
      SelectBranchListFun();
      SelectCommiteListFun();
      SelectUserListFun();
      form.value = {
        id: -1,
        nickname: "",
        email: "",
        branchId: "",
        branchName: "",
        commiteId: "",
        commiteName: "",
        userId: "",
        sex: "",
        joinDate: "",
      };
    }
  }
);

const emits = defineEmits(["update:modelValue", "initUserList"]);

const handleClose = () => {
  emits("update:modelValue", false);
};

const handleConfirm = async () => {
  // 查询姓名
  const userRes = await requestUtil.get("sys/user/" + form.value.userId);
  form.value.nickname = userRes.data.sysUser.nickname;
  // 查询党支部
  const branchRes = await requestUtil.get("branch/getBranchById", { id: form.value.branchId });
  form.value.branchName = branchRes.data.party.branchName;
  // 查询二级党委
  const comiteRes = await requestUtil.get("commite/getCommiteById", { id: form.value.commiteId });
  form.value.commiteName = comiteRes.data.party.commiteName;
  formRef.value.validate(async (valid) => {
    if (valid) {
      let result;
      if (form.value.id != -1) {
        result = await requestUtil.post("party/updateParty", form.value);
      } else {
        result = await requestUtil.post("party/setParty", form.value);
      }

      let data = result.data;
      if (data.code == 200) {
        ElMessage.success(data.msg);
        formRef.value.resetFields();
        emits("initUserList");
        handleClose();
      } else {
        ElMessage.error(data.msg);
      }
    } else {
      console.log("fail");
    }
  });
};
</script>

<style scoped>
.widthForm {
  width: 100%;
}

.el-dialog {
  padding: 0 40px;
}

.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
